<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>忘记密码 - 柚聊</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/forget.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <!-- 加载动画 -->
  <div class="loading-screen" id="loadingScreen">
    <div class="loader"></div>
    <div class="loading-text">忘记密码页面正在加载,请稍等片刻...</div>
  </div>

  <!--导航栏-->
  <div class="nav">
    <div class="nav-brand">
      <svg t="1762146198299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10957" width="200" height="200">
        <!-- SVG路径保持不变 -->
      </svg>
      柚聊
    </div>
    <ul class="nav-menu">
      <li><a href="login.html"><i class="fas fa-sign-in-alt"></i> 登录</a></li>
      <li><a href="register.html"><i class="fas fa-user-plus"></i> 注册</a></li>
      <li><a href="help.html"><i class="fas fa-question-circle"></i> 帮助</a></li>
      <li><a href="about.html"><i class="fas fa-info-circle"></i> 关于聊天室</a></li>
    </ul>
  </div>

  <!--忘记密码表单-->
  <div class="forgot-container" id="forgotContainer">
    <div class="forgot-dialog">
      <h3>通过密保问题重置密码</h3>

      <form id="forgot-form">
        <div class="row">
          <label for="username">用户名</label>
          <input type="text" id="username" placeholder="请输入您的用户名">
          <div class="hint">请输入您注册时使用的用户名</div>
          <div class="error-message" id="username-error">请输入有效的用户名</div>
        </div>

        <div class="row">
            <label for="security-question">密保问题</label>
            <input type="text" id="security-question" readonly placeholder="请输入用户名后自动显示" style="background-color: #f8f9fa;">
            <div class="hint" id="security-question-hint">请输入用户名后，密保问题将自动显示在这里</div>
            <div class="error-message" id="security-question-error">该用户未设置密保问题</div>
        </div>

        <div class="row">
          <label for="security-answer">密保答案</label>
          <input type="text" id="security-answer" placeholder="请输入您的密保答案">
          <div class="hint">请输入您设置密保问题时填写的答案</div>
          <div class="error-message" id="security-answer-error">密保答案不能为空</div>
        </div>

        <div class="row">
          <label for="new-password">新密码</label>
          <input type="password" id="new-password" placeholder="请输入新密码">
          <div class="hint">密码长度至少为6个字符</div>
          <div class="error-message" id="new-password-error">密码不能为空</div>
        </div>

        <div class="row">
          <label for="confirm-password">确认新密码</label>
          <input type="password" id="confirm-password" placeholder="请再次输入新密码">
          <div class="hint">请再次输入您的新密码</div>
          <div class="error-message" id="confirm-password-error">两次输入的密码不一致</div>
        </div>

        <div class="row">
          <button type="submit" id="submit">重置密码</button>
        </div>
      </form>

      <div class="additional-links">
        <a href="login.html">返回登录</a>
        <span>|</span>
        <a href="register.html">注册新账户</a>
      </div>
    </div>
  </div>

  <!--引入jQuery-->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <!--引入自定义JavaScript-->
  <script src="js/forget.js"></script>
</body>
</html>